<template>
	<div id="index" v-if="articleList.data">
		<a-layout>
			<a-config-provider :locale="language">
				<a-layout-header>
					<div id="topbar">
						<topBar @loginVisibleShow="getloginData" @registerVisibleShow="getregisterData" :isSearchPage="false">
						</topBar>
					</div>
				</a-layout-header>
				<a-layout-header>
					<div id="evaluating" v-if="userList.data">
						<a-layout>
							<a-layout>
								<a-layout-header>
									<div id="evaluating-title">
										<a-typography>
											<a-typography-title id="title" :heading="3" >
												{{articleList.data.title}}
											</a-typography-title>
											<a-typography-title id="type">
												<span style="color: gray;">评论 > 高达模型讨论区 >
													模玩评测</span>&nbsp;&nbsp;&nbsp;&nbsp;
												<a-space>
													<a-tag color="#c5d4e5" style="color:#0f1012;">
														<template #icon>
															<icon-info-circle-fill />
														</template>
														高达
													</a-tag>
													<a-tag color="#c5d4e5" style="color:#0f1012;">
														<template #icon>
															<icon-info-circle-fill />
														</template>
														模型
													</a-tag>
													<a-tag color="#c5d4e5" style="color:#0f1012;">
														<template #icon>
															<icon-info-circle-fill />
														</template>
														模玩分享大作战
													</a-tag>
												</a-space>
											</a-typography-title>
											<a-typography-title id="count">
												<a-space style="color: gray;">
													<icon-eye :size="16" />
													<span>{{articleList.data.watch}}</span>&nbsp;
													<IconMessage :size="13" />
													<span>{{commentLength}}</span>
												</a-space>
												<a-divider style="margin-top: 1%;" />
											</a-typography-title>
										</a-typography>
									</div>
								</a-layout-header>
								<a-layout-content>
									<div id="article">
										<a-comment>
											<template #avatar>
												<a-avatar>
													<img alt="avatar"
														:src="userList.data.avatar" />
												</a-avatar>
											</template>
											<template #content>
												<div id="fillContent" v-html="fillContent"></div>
											</template>
											<template #actions>
												<span id="article-time">
													本帖最后由 {{userList.data.nickName}} 于 {{articleList.data.updateTime}} 编辑
												</span>
											</template>
											<template #datetime>
												<span>发布于：{{articleList.data.publishTime}}</span>
											</template>
											<template #author>
												<a-row :wrap="false">
													<a-col :span="12">
														{{userList.data.nickName}}
													</a-col>
													<a-col :span="12" style="text-align: right;">
														1楼
													</a-col>
												</a-row>
											</template>
										</a-comment>
									</div>
								</a-layout-content>
							</a-layout>
							<a-affix :offsetTop="5" style="margin-right: -15%;">
								<a-layout-sider style="width: 400px;margin-right: 3%;margin-top: 8%;height: 400px;">
									<div style="width: 100%;">
										<a-card class="user-card" hoverable>
											<a-space :size="15">
												<a-avatar :size="60">
													<img alt="avatar" :src="userList.data.avatar" />
												</a-avatar>
												<a-space direction="vertical" fill>
													<span style="font-size: 25px;font-weight: bold;">{{userList.data.nickName}}</span>
													<a-tag color="#c5d4e5"
														style="color:#0f1012;transform: translateX(-12%);">
														<template #icon>
															<icon-subscribe />
														</template>
														楼主
													</a-tag>
												</a-space>
											</a-space>
											<br /><br /><br />
											<a-descriptions :data="[{label: '文章',value: userList.data.article},
										{label: '关注',value: userList.data.focus}, {label: '点赞',value: userList.data.good}]" layout="inline-vertical"
												style="margin-left: 20%;" />
											<a-divider />
											<a-typography>
												<a-typography-title :heading="4">
													个人签名:
												</a-typography-title>
												<a-typography-paragraph style="text-align: left;text-indent: 20px;">
													{{userList.data.sign}}
												</a-typography-paragraph>
											</a-typography>
											<br />
											<a-space :size="30">
												<a-button type="primary" id="focusBtn"
												@click="focusUser(userList.data.uid)">关注</a-button>
												<!-- <a-button>收藏</a-button> -->
											</a-space>
										</a-card>
									</div>
								</a-layout-sider>
							</a-affix>
							<a-affix :offsetTop="5" style="height: 200px;">
								<div
									style="margin-top: 500px;width: 70px;transform: translate(-250%,-15%);height: 200px">
									<a-space :size="5" direction="vertical" fill>
										<a-back-top :visible-height="0" style="transform: translate(22%,40%);" />
										<a-avatar @click="like" shape="square" style="background-color:#ffb5c5;cursor: pointer;">
											<icon-thumb-up :size="30" />
										</a-avatar>
										<a-avatar shape="square" @click="scroller" style="background-color:#eed762;cursor: pointer;">
											<icon-message :size="30" />
										</a-avatar>
										<a-avatar @click="save" shape="square" style="background-color:#76d7e6;cursor: pointer;">
											<icon-star :size="30" />
										</a-avatar>
									</a-space>
								</div>
							</a-affix>
							<a-affix :offsetTop="5" style="margin-right: 6%;height: 200px;" >
								<a-card style="width: 330px;transform: translate(-47%,190%);height: 230px;" v-if="articleList.data.isModel == '1'">
									<template #actions>
										<span>
											<icon-list
												@click="()=>{router.push({path: '/modelDetail/goods/' + route.params.id});}" />
										</span>
									</template>
									<template #cover>
										<a-image width="170" height="135" :preview="false" style="margin-top: 2%;"
											:src="articleList.data.src" />
									</template>
									<a-card-meta :title="articleList.data.name">
										<template #avatar>
											<div style="display: flex;align-items:center;color: #1D2129;">
												<a-space>
													<a-avatar :size="20" auto-fix-font-size>
														<i class="iconfont iconfont-relate" style="font-size: 28px;" />
													</a-avatar>
													<a-typography-text style="font-weight: bold;font-size: 20px;">相关单品
													</a-typography-text>
												</a-space>
											</div>
										</template>
									</a-card-meta>
								</a-card>
								<!--没有关联单品-->
								<a-card style="width: 330px;transform: translate(-47%,190%);height: 230px;visibility: hidden;" 
								v-else-if="articleList.data.isModel == '0'">
								</a-card>
							</a-affix>
						</a-layout>
						<a-layout-footer>
							<div id="footer">
								<a-layout-header id="footer-header">
									<a-divider />
									<emojiComment :commentsList="commentList.resp" :mentionsList="mentionList.data"
									:currentPage="currentPage" :currentPageSize="currentPageSize" 
									@refrushParnentComment="refurshComment"
									@PageChange="getcurrentPage" @SizeChange="getcurrentPageSize" v-if="commentList.resp">

									</emojiComment>
								</a-layout-header>
							</div>
						</a-layout-footer>
					</div>
				</a-layout-header>
			</a-config-provider>
		</a-layout>
	</div>
</template>

<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance,
		watch,
		onMounted,
		provide,
		nextTick
	} from 'vue';

	//国际化组件
	import enUS from '@arco-design/web-vue/es/locale/lang/en-us';
	import zhCN from '@arco-design/web-vue/es/locale/lang/zh-cn';

	import topBar from '@/components/index/topBar.vue';
	import emojiComment from '@/components/modelEvaluating/emoji/emojiComment.vue'
	import indexApi from '@/module/modelEvaluating/api/index.js';
	import jwt_decode from 'jwt-decode';

	let {
		proxy
	} = getCurrentInstance();

	let language = ref(zhCN);
	
	import {
		useRouter
	} from 'vue-router';
	import {
		useRoute
	} from 'vue-router';
	let router = useRouter();
	let route = useRoute();

	let loginformVisible = ref(false);
	let registerformVisible = ref(false);
	let commentList = reactive({});
	let articleList = reactive({});
	let userList = reactive({});
	let aId = ref();
	let commentLength = ref();
	let mentionList = reactive({});

	let fillContent = ref(``);
	let contentHeight = ref(0);
	
	let currentPage = ref(1);
	let currentPageSize = ref(5); 
	
	let focusStatus = reactive({});
	let saveStatus = reactive({});

	function changeLanguage() {
		console.log('当前语言', language.value);
		if (language.value.locale != '' && language.value.locale != null && language.value.locale == 'zh-CN') {
			language.value = enUS;

			proxy.$i18n.locale = 'en';
		} else {
			language.value = zhCN;

			proxy.$i18n.locale = 'zh';
		}
		console.log('切换后语言', language.value);
	}

	function changeThemeColor() {
		if (document.body.getAttribute('arco-theme') == 'dark') {
			document.body.removeAttribute('arco-theme');
			document.documentElement.style.setProperty('--color-content', '#fcfcfc');
			document.documentElement.style.setProperty('--color-content-a', '#4c4c4c');
			document.documentElement.style.setProperty('--color-font', '#4c4c4c');

		} else {
			document.body.setAttribute('arco-theme', 'dark');
			document.documentElement.style.setProperty('--color-content', '#4c4c4c');
			document.documentElement.style.setProperty('--color-content-a', '#f4f4f4');
			document.documentElement.style.setProperty('--color-font', '#f4f4f4');
		}
	}
	
	async function focusUser(fId){
		if(sessionStorage.getItem("token")){
			console.log('fId',fId);
			console.log('uId',jwt_decode(sessionStorage.getItem("token")).uid);
			//关注楼主
			focusStatus.resp = await indexApi.focusUser(fId,jwt_decode(sessionStorage.getItem("token")).uid);
			console.log('focusStatus.resp',focusStatus.resp);
			if(focusStatus.resp.message == '请不要关注自己'){
				proxy.$message.error('请不要关注自己');
			}
			else if(focusStatus.resp.message == '你已经关注该用户了,请不要重复操作'){
				proxy.$message.error('你已经关注该用户了,请不要重复操作');
			}
			else if(focusStatus.resp.message == '关注失败'){
				proxy.$message.error('关注失败');
			}
			else if(focusStatus.resp.message == '未知错误'){
				proxy.$message.error('未知错误');
			}
			else if(focusStatus.resp.message == '关注成功'){
				proxy.$message.success('关注成功');
			}
		}
		else{
			proxy.$message.error('请先登录');
		}
	}

	function like() {
		proxy.$message.success('感谢你的支持！');
	}

	async function save() {
		if(sessionStorage.getItem("token")){
			console.log('aId',articleList.data.aId);
			console.log('uId',jwt_decode(sessionStorage.getItem("token")).uid);
			saveStatus.resp = await indexApi.saveArticle(articleList.data.aId,jwt_decode(sessionStorage.getItem("token")).uid);
			if(saveStatus.resp.message == '你已经收藏了该文章了,请不要重复操作'){
				proxy.$message.error('你已经收藏了该文章了,请不要重复操作');
			}
			else if(saveStatus.resp.message == '收藏失败'){
				proxy.$message.error('收藏失败');
			}
			else if(saveStatus.resp.message == '未知错误'){
				proxy.$message.error('未知错误');
			}
			else if(saveStatus.resp.message == '收藏成功'){
				proxy.$message.success('收藏成功');
			}
		}
		else{
			proxy.$message.error('请先登录');
		}
	}

	function scroller() {
		contentHeight.value = document.getElementById('fillContent').offsetHeight;
		document.getElementById('footer').scrollIntoView();
	}
	
	watch(contentHeight,(newValue,preValue)=>{
		console.log('preValue',preValue);
		console.log('newValue',newValue);
		document.getElementById('footer').scrollIntoView();
		setTimeout(()=>{
			console.log('content',document.getElementById('fillContent').offsetHeight);
			contentHeight.value = document.getElementById('fillContent').offsetHeight;
		},200)
	});
	
	function refurshComment(data){
		if(data == true){
			nextTick(()=>{
				//更新提及列表和评论列表
				nextTick(()=>{
					loadingCommentList();
				})
			})
		}
	}

	async function loadingCommentList() {
		commentList.resp = await indexApi.getCommentList(aId.value,{
			"currentPage": currentPage.value,
			"pageSize": currentPageSize.value,
			"queryString": ""
		});
		commentList.resp = commentList.resp;
		commentLength.value = commentList.resp.data.length;
		/* mentionList.data = commentList.resp.data.map((item,index)=>{
			return item.nickName;
		}); */
		let commentSet = new Set();
		commentList.resp.data.forEach(item =>{
			commentSet.add(item.nickName);
		});
		mentionList.data = [...commentSet];
		console.log('mentionList.data',mentionList.data);
		console.log('commentList', commentList.resp);
		return commentList;
	}
	
	provide('getAid',aId)
	async function loadingArticleList() {
		console.log('mId:',route.params.id);
		articleList.resp = await indexApi.getArticleList(route.params.id);
		articleList.data = articleList.resp.data;
		aId.value = articleList.data.aId;
		fillContent.value = articleList.data.content;
		loadingCommentList();
		console.log('articleList', articleList.data);
		return articleList;
	}
	
	async function loadingUserList() {
		console.log('mId:',route.params.id);
		userList.resp = await indexApi.getUserList(route.params.id);
		userList.data = userList.resp.data;
		console.log('userList', userList.data);
		return userList;
	}

	function getloginData(data) {
		loginformVisible.value = data;
		console.log('loginVisable', data);
	}

	function getregisterData(data) {
		registerformVisible.value = data;
		console.log('registerVisable', data);
	}
	
	function getcurrentPage(data){
		console.log('page',data);
		currentPage.value = data;
		loadingCommentList();
	}
	
	function getcurrentPageSize(data){
		console.log('size',data);
		currentPageSize.value = data;
		loadingCommentList();
	}

	let addCartGoodStatus = ref(false);
	provide('flushShoppingCart',addCartGoodStatus);
	//获取添加商品的状态
	function getCartGood(data){
		console.log('status',data);	
		addCartGoodStatus.value = data;
	}

	onMounted(() => {
		console.log('modelEvaluating的onMounted执行了');
		document.documentElement.style.setProperty('--color-content', '#f4f4f4');
		document.documentElement.style.setProperty('--color-font', 'gray');
		loadingArticleList();
		loadingUserList();
		console.log('env',
			import.meta.env);
	});
</script>

<style lang="less" scoped>
	@import '@/assets/modelEvaluating/css/index.less';
</style>